<template>
  <div class="selectContainer">
    <div class="inputBox">
      <input v-model="inputValue" @click="showSelectItem" @blur="hideSelectItem" type="text">
      <i class="el-icon-arrow-up" :class="{'arrowActive':!itemShow}"></i>
    </div>
    <div v-show="itemShow" class="selectItem">
      <div v-if="selectList.length<1">无数据</div>
      <template v-for="(item,index) in selectList">
        <div :title="item.str" class="showTitle" @click="checkItem(item,$event,'items')">
          {{item.name}}
        </div>
        <div class="selectTitle" v-for="(item1,index1) in item.networkSegment">
          <!--<div @click="checkItem(item1,$event,'single')">-->
            <!--{{item1.ip}}-->
          <!--</div> -->

          <!--<div>-->
            <!--{{item1.ip}}-->
          <!--</div>-->
        </div>
      </template>
    </div>
  </div>
</template>

<script>
  export default {
    props:{
      selectList:{
        type:Array
      },
      inputValue:{
        default:"",
      },
      initIndex:{
        default:"",
      },
    },
    data() {
      return {
        // inputValue:"",
        oldValue:"",
        itemShow:false,
        id:"",
      }
    },
    created(){
      for (let i = 0; i < this.selectList.length; i++) {
          let str = "", arr =  this.selectList[i].networkSegment;
          for (let j = 0; j < arr.length; j++) {
            str += arr[j].ip + ',';
          }
          this.$set(this.selectList[i],'str',str);
        }
    },
    mounted(){
      this.$nextTick(()=>{
        document.addEventListener('click', (e) => {
          if (!this.$el.contains(e.target)) this.itemShow = false;
        });
      })
    },
    watch:{
      inputValue(newVal,oldVal){
          if(newVal!=oldVal){
            let data={
              name:newVal,
              id:this.id,
            }
            if(newVal!=this.oldValue){
              data.id="";
              if(this.initIndex!==""){

              }
              this.$emit('changeInputValue',data);
            }else{
              data.id=this.id;
              if(this.initIndex!==""){

              }
              this.$emit('changeInputValue',data);
            }
          }

      },
      selectList(newVal,oldVal){
        for (let i = 0; i < newVal.length; i++) {
          let str = "", arr =  newVal[i].networkSegment;
          for (let j = 0; j < arr.length; j++) {
            str += arr[j].ip + ',';
          }
          this.$set(this.selectList[i],'str',str);
        }
      },
    },
    methods:{
      checkItem(item,e,type){
        e.stopPropagation();
        if(type=='items'){
          this.inputValue=item.name;
          this.oldValue=item.name;
        }else{
          this.inputValue=item.ip;
          this.oldValue=item.ip;
        }
        this.id=item.id;
        let data={
          name:this.inputValue,
          id:this.id,
        }
        if(this.initIndex!==""){

        }
        this.$emit('changeInputValue',data);
        $(e.target).addClass('active').siblings().removeClass('active');
        this.itemShow=false;
      },
      showSelectItem(){
        this.itemShow=!this.itemShow;
      },
      hideSelectItem(){
        // this.itemShow=false;
      },
    }
  }
</script>

<style scoped lang="less" type="text/less">
  .selectContainer {
    position: relative;
    width: 100%;
    height: 37px;
    line-height: 37px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    .inputBox{
      width: 100%;
      position: relative;
      i{
        position: absolute;
        right: 5px;
        top: 10px;
        transition: all linear 0.3s;
        font-size: 14px;
        color: #586a77;
      }
      .arrowActive{
        transform:rotate(180deg);
      }
      input {
        border: none;
        outline: none;
        height: 33px;
        width: 100%;
        display: block;
      }
    }
    .selectItem{
      position: absolute;
      left: 0;
      top: 38px;
      width: 100%;
      border: 1px solid #dcdfe6;
      z-index: 666;
      background: #fff;
      height: auto;
      max-height: 400px;
      overflow-y: auto;
      div{
        padding: 0px 8px;
        font-size: 13px;
        cursor: pointer;
      }
      div:hover{
        /*background: #ddd;*/
        color: #409EFF;
      }
      .active{
        color: #409EFF;
      }
    }
    .selectItem::-webkit-scrollbar {
      width: 3px;
      height: 20px;
      background-color: #fff;
    }
    /*定义滑块 内阴影+圆角*/
    .selectItem::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
      background-color: #C7D0D5;
    }
  }
</style>
